import { CloseOutlined, PlusOutlined } from '@ant-design/icons'
import { Form, Button, Input } from 'antd'
import { Loading, ImportantEditModal } from '@/desktop/components'
import type { ExternalExtra } from '@/services/contact-types/externals'
import { useUpdateInfo } from './hooks'
import './edit.module.less'

export default function EditInfo(props: {
  visible: boolean
  onClose: () => void
  onEdited: (updated: ExternalExtra) => void

  contactId: string
  extra: ExternalExtra
}) {
  const { visible, onClose, onEdited, contactId, extra } = props

  return <ImportantEditModal title="编辑客户资料" width="600px" open={visible} onCancel={onClose}>
    {visible ? (
      <Content contactId={contactId} extra={extra} onCancel={onClose} onEdited={onEdited} />
    ) : null}
  </ImportantEditModal>
}

function Content(props: {
  contactId: string
  extra: ExternalExtra
  onCancel: () => void
  onEdited: (updated: ExternalExtra) => void
}) {
  const { contactId, extra, onCancel, onEdited } = props

  const [updating, update] = useUpdateInfo(contactId, extra, onEdited)

  const content = <>
    <Form.Item name="remark" label="备注名">
      <Input maxLength={100} />
    </Form.Item>

    <Form.Item name="corpRemark" label="企业">
      <Input maxLength={100} />
    </Form.Item>

    <Form.Item name="describe" label="描述">
      <Input.TextArea rows={4} />
    </Form.Item>

    <Form.Item name="phoneList" label="电话">
      <PhonesInput />
    </Form.Item>
  </>

  return <Form initialValues={extra} onFinish={update} styleName="form" labelCol={{ span: 3 }}>
    <main styleName="main">
      {updating === false ? content : <Loading tip={updating}>{content}</Loading>}
    </main>
    <footer>
      <Form.Item noStyle>
        <Button onClick={onCancel}>取消</Button>
        <Button loading={updating !== false} type="primary" htmlType="submit">
          保存
        </Button>
      </Form.Item>
    </footer>
  </Form>
}

function PhonesInput(props: { value?: string[]; onChange?: (value: string[]) => void }) {
  const { value, onChange: propsOnChange } = props
  const phones = useMemo(() => (!value || !value.length ? [''] : value), [value])

  const onInput = useCallback(
    (index: number, inputValue: string) => {
      const newValue = [...phones]
      newValue[index] = inputValue
      propsOnChange!(newValue)
    },
    [phones, propsOnChange],
  )

  function add() {
    propsOnChange?.([...phones, ''])
  }

  const remove = useCallback(
    (index: number) => {
      const newValue = [...phones]
      newValue.splice(index, 1)
      propsOnChange!(newValue)
    },
    [phones, propsOnChange],
  )

  return <div>
    {phones.map((phone, index) => <div styleName="phones-input-item" key={index}>
      <Input
        maxLength={30}
        value={phone}
        onInput={e => onInput(index, (e.target as HTMLInputElement).value)}
      />
      <div styleName="phone-remove">
        {index !== 0 ? <CloseOutlined onClick={() => remove(index)} /> : null}
      </div>
    </div>)}
    {phones.length < 5 ? (
      <Button icon={<PlusOutlined />} type="link" onClick={add}>
        添加电话
      </Button>
    ) : null}
  </div>
}
